<template>
  <div class="all">
    <div class="leftbox">
      <div class="ltop">
        <div class="title">ORDER聚造</div>
        <div class="xtk">
          <div class="xt"></div>
          <div class="xt"></div>
          <div class="xt"></div>
        </div>
      </div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>首页管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
            <el-menu-item index="/index/category">分类区管理</el-menu-item>
            <el-menu-item index="/index/recomend">为你推荐管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>商品管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/fl">分类管理</el-menu-item>
            <el-menu-item index="/index/pinpai">品牌管理</el-menu-item>
            <el-menu-item index="/index/danpin">单品管理</el-menu-item>
            <el-menu-item index="/index/shangpin">商品管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-menu-item index="/index/news">
          <i class="el-icon-menu"></i>
          <span slot="title">新闻管理</span>
        </el-menu-item>

      </el-menu>
    </div>
    <div class="rightbox">
      <div class="rtop">
        <img src="../assets/tx.png" class="tx" />
        <el-tooltip placement="bottom">
          <div slot="content" @click="dialogFormVisible = true" class="cursor">
            修改密码
          </div>
          <div class="xk">
            <span class="hy">{{ nickName }}</span>
            <div class="hy">, 你好！</div>
          </div>
        </el-tooltip>
        <el-row class="tck">
          <el-button type="danger" size="small" @click="logout" round>
            <i class="el-icon-switch-button"></i>
            退出
          </el-button>
        </el-row>
      </div>

<b style="margin-left: 50px;">{{ $route.meta.title }}</b>
      <router-view></router-view>
      

    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
          <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="password" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import md5 from "js-md5";
export default {
  name: "index",
  components: {},
  data() {
    return {
      photo: "",
      nickName: "",
      dialogFormVisible: false,
      form: {
        passWord: "",
        newPassWord: "",
        reNewPassWord: "",
      },
      group: {
        //选中的群组
        groupId: "",
        groupName: "",
      },
      menus: [], //菜单树
      rules: {
        passWord: [
          { required: true, message: "请输入原密码", trigger: "blur" },
        ],
        newPassWord: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        reNewPassWord: [
          { required: true, message: "请重复输入新密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.form.newPassWord) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changePassWord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/admin/changePassWord",
            method: "POST",
            data: {
              passWord: md5(this.form.passWord),
              newPassWord: md5(this.form.newPassWord),
            },
          }).then((res) => {
            if (!res.errorMsg) {
              (this.dialogFormVisible = false),
                this.$message({
                  message: "修改密码成功",
                  type: "success",
                  duration: 3000,
                });
              setTimeout(() => {
                location.href = "#/login";
              }, 3000);
            }
          });
        } else {
          return false;
        }
      });
    },
    logout() {
      this.$confirm("是否退出登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/admin/logout",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/login";
          }
        });
      });
    },
  },
  created() {
    ///从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    if (!user) {
      // this.$router.push("./login");
      location.href = location.origin + "#/login";
    } else {
      ///解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/tx.png");
      ///设置昵称
      this.nickName = user.nickName || "小王";
      ///获取菜单
      //this.getMenus()
    }
  },
  mounted() {},
};
</script>

<style scoped>
.all {
  display: flex;
  height: 100%;
  width: 100%;
}
.leftbox {
  margin: 0;
  padding: 0;
  width: 210px;
  background: url(../assets/bj.png);
}
.rightbox {
  width: 1625px;
  height: 100%;
  background: #eff6fc;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.ltop {
  display: flex;
  width: 146px;
  height: 23px;
  margin-left: 47px;
  margin-top: 6px;
}
.title {
  width: 100px;
  height: 23px;
  font-size: 18px;
  font-family: MicrosoftYaHeiUI-Bold-, MicrosoftYaHeiUI-Bold;
  font-weight: normal;
  color: #ffffff;
}
.xtk {
  height: 10px;
  width: 12px;
  margin-left: 34px;
  margin-top: 8px;
}
.xt {
  width: 12px;
  height: 1px;
  background: #ffffff;
  border-radius: 1px 1px 1px 1px;
  opacity: 1;
  margin-top: 4px;
}
.ldb {
  width: 160px;
  height: 245px;
  margin-top: 24px;
  margin-left: 34px;
  flex-direction: column;
}
.box {
  display: flex;
  height: 18px;
  width: 160px;
  margin-top: 26px;
}
.tp {
  width: 18px;
  height: 18px;
}
.zt {
  width: 56px;
  height: 18px;
  font-size: 14px;
  margin-left: 9px;
  white-space: nowrap;
  font-weight: normal;
  color: #aaaaaa;
}
.jt {
  width: 9px;
  height: 5px;
  margin-top: 7px;
  margin-left: 67px;
}
.hx {
  width: 4px;
  height: 19px;
  margin-left: 73px;
  background: #ed0606;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
.rtop {
  display: flex;
  height: 48px;
  width: 1103px;
  margin-left: 37px;
  margin-top: 30px;
}
.xx {
  width: 226px;
  height: 20px;
  font-size: 16px;
  margin-top: 7px;
  white-space: nowrap;
  font-weight: normal;
  color: #2c2c2c;
}
.tx {
  width: 48px;
  height: 48px;
  margin-left: 588px;
}
.xk {
  display: flex;
  height: 48px;
  width: 150px;
}
.hy {
  height: 19px;
  font-size: 14px;
  white-space: nowrap;
  font-weight: normal;
  color: #2c2c2c;
  margin-left: 8px;
  margin-top: 14px;
}
.hk {
  display: flex;
  width: 71px;
  height: 29px;
  background: #f56c6c;
  margin-top: 10px;
  margin-left: 4px;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
}
.tck {
  width: 71px;
  height: 29px;
  margin-top: 10px;
}
.kg {
  width: 7px;
  height: 7px;
  background: #ffffff;
  opacity: 1;
  margin-left: 18px;
  margin-top: 8px;
  border: 2px solid #ffffff;
}
.tc {
  width: 71px;
  height: 45px;
  font-size: 12px;
  margin-top: 5px;
  margin-left: 5px;
  font-weight: normal;
  color: #ffffff;
}
</style>
